---
layout: default
title: Furatto - Modal
---

<h1>Modal</h1>

<p class="main-motto">Furatto comes with a sleek, neat, yet powerful responsive modal for displaying messages, forms and more. You will </p>

<hr />

<!--a link element to trigger the modal-->
<a class="button primary large" data-furatto="modal" data-target="#modal-1" data-transition="1" data-theme="alpha">Launch modal</a>

<!--the modal-->
<div class="modal" id="modal-1">
  <div class="modal-header">
    Modal Dialog
  </div>
  <div class="modal-content">
    <div>
      <p>This is a modal window. It has 3 main elements:</p>
      <ul>
        <li><strong>Header:</strong> The top text of the modal, could be used as a title.</li>
        <li><strong>Content:</strong> The actual content of the modal content.</li>
        <li><strong>Footer:</strong> Probably a bunch of actions, or just the close button.</li>
      </ul>
      <div class="modal-footer">
        <a class="modal-close button alpha primary">Close me!</a>
      </div>
    </div>
  </div>
</div>

<hr />

<h3>Building the markup</h3>

<p>It is extremely easy to build a modal window, just two big elements playing around it, which are an <span class="code">anchor</span> and a <span class="code">div</span>.</p>

<pre>
  <code>
&lt;!--a link element to trigger the modal--&gt;<br/>&lt;a class=&quot;button primary large&quot; data-furatto=&quot;modal&quot; data-target=&quot;#modal-1&quot; data-transition=&quot;1&quot; data-theme=&quot;alpha&quot;&gt;Launch modal&lt;/a&gt;<br/><br/>&lt;!--the modal--&gt;<br/>&lt;div class=&quot;modal&quot; id=&quot;modal-1&quot;&gt;<br/>  &lt;div class=&quot;modal-header&quot;&gt;<br/>    Modal Dialog<br/>  &lt;/div&gt;<br/>  &lt;div class=&quot;modal-content&quot;&gt;<br/>    &lt;div&gt;<br/>      &lt;p&gt;This is a modal window. It has 3 main elements:&lt;/p&gt;<br/>      &lt;ul&gt;<br/>        &lt;li&gt;&lt;strong&gt;Header:&lt;/strong&gt; The top text of the modal, could be used as a title.&lt;/li&gt;<br/>        &lt;li&gt;&lt;strong&gt;Content:&lt;/strong&gt; The actual content of the modal content.&lt;/li&gt;<br/>        &lt;li&gt;&lt;strong&gt;Footer:&lt;/strong&gt; Probably a bunch of actions, or just the close button.&lt;/li&gt;<br/>      &lt;/ul&gt;<br/>      &lt;div class=&quot;modal-footer&quot;&gt;<br/>        &lt;a class=&quot;modal-close button alpha primary&quot;&gt;Close me!&lt;/a&gt;<br/>      &lt;/div&gt;<br/>    &lt;/div&gt;<br/>  &lt;/div&gt;<br/>&lt;/div&gt;<br/>
  </code>
</pre>

<blockquote class="danger">
  <h4>A data attribute modal</h4>
  <p>You have to add some basic configuration to the anchor element, such as the plugin binding, modal target and much more...</p>
</blockquote>

<hr />

<h3>Usage</h3>

<h4 class="code">Via data attributes</h4>

<p>Add the <span class="code">data-furatto="modal"</span> attribute to a button or link. It is necessary that you add a <span class="code">data-target="#myModal"</span> attribute poiting to the modal.</p>

<pre>
  <code>
 &lt;a class=&quot;button primary large&quot; data-furatto=&quot;modal&quot; data-target=&quot;#modal-1&quot;&gt;Launch modal&lt;/a&gt; 
  </code>
</pre>

<h4 class="code">Via javascript</h4>

<p>You can show or hide a modal by calling the show or the hide function, like so:</p>

<pre>
  <code>
  $('#modal').modal('show');
  $('#modal').modal('hide');
  </code>
</pre>

<hr />

<h4 class="code">Standalone modal</h4>

<p>Recently we discover a tiny bug, which didn't let the modal live without the anchor element. But thanks to <a href="https://twitter.com/kurenn" target="_blank">@kurenn</a> that is not a problem anymore. If you want to use the modal with pure javascript, let's say to show it after and ajax call, you probably would call something like:</p>

<pre>
  <code>
  $('#modal').modal('show');
  </code>
</pre>

<p>The problem in here was, that the modal wasn't showing as expected, see the <a href="https://github.com/IcaliaLabs/furatto/issues/85">issue</a> on github. If you are taking this approach just keep in mind you'll have to set the same configuration for <span class="code">transition</span>, <span class="code">theme</span> to the '.modal' element, and <strong>be sure you add the <span class="code">data-furatto="modal"</span> attribute</strong>. An example is provided below: </p>

<pre>
  <code>
   &lt;div class=&quot;modal&quot; id=&quot;modal-1&quot; data-furatto=&quot;modal&quot; data-theme=&quot;alpha&quot; data-transition=&quot;3&quot;&gt;<br/>      &lt;div class=&quot;modal-header&quot;&gt;<br/>        Modal Dialog<br/>      &lt;/div&gt;<br/>      &lt;div class=&quot;modal-content&quot;&gt;<br/>        &lt;div&gt;<br/>          &lt;p&gt;This is a modal window. It has 3 main elements:&lt;/p&gt;<br/>          &lt;ul&gt;<br/>            &lt;li&gt;&lt;strong&gt;Header:&lt;/strong&gt; The top text of the modal, could be used as a title.&lt;/li&gt;<br/>            &lt;li&gt;&lt;strong&gt;Content:&lt;/strong&gt; The actual content of the modal content.&lt;/li&gt;<br/>            &lt;li&gt;&lt;strong&gt;Footer:&lt;/strong&gt; Probably a bunch of actions, or just the close button.&lt;/li&gt;<br/>          &lt;/ul&gt;<br/>          &lt;div class=&quot;modal-footer&quot;&gt;<br/>            &lt;a class=&quot;modal-close button alpha primary&quot;&gt;Close me!&lt;/a&gt;<br/>          &lt;/div&gt;<br/>        &lt;/div&gt;<br/>      &lt;/div&gt;<br/>    &lt;/div&gt;
  </code>
</pre>

<hr />

<h3>Options</h3>

<p>There are several options you can pass via data attributes to the modal plugin, just by appending the option name to <span class="code">data-</span>, as in <span class="code">data-target.</span></p>

<table class="responsive">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Default</th>
      <th>Description</th>
    </tr>
  </thead>   
  <tbody>
  <tr>
    <td>target</td>
    <td>string</td>
    <td>You should set it up.</td>
    <td>Id of the modal with a <span class="code">#</span> symbol appended</td>
  </tr>
  <tr>
    <td>transition</td>
    <td>number</td>
    <td>"1"</td>
    <td>It's the transition you want in the modal, goes from <span class="code">1</span> to <span class="code">6</span>. Really cool mate!</td>
  </tr>
  <tr>
    <td>theme</td>
    <td>string</td>
    <td>"default"</td>
    <td>It is the theme you want to use for the modal, currently Furatto comes with 4 different ones, <span class="code">primary</span>, <span class="code">danger</span>, <span class="code">default</span>, <span class="code">alpha</span>.</td>
  </tr>
  </tbody>
</table>

<hr />

<h3>Available sass variables</h3>

<p>You can easily change the default modal css rules by overwriting our variables.</p>

<pre>
  <code>
//General settings
$modal-width: 80% !default;
$modal-z-index: 1050 !default;
$modal-color: #FFF !default;
$modal-top-position: px-to-rems(80) !default;
$modal-position: absolute !default;

//Modal styles
$modal-primary-background-color: #3498DB !default;
$modal-default-background-color: #F0F0F0 !default;
$modal-danger-background-color: #E74C3C !default;
$modal-funky-background-color: #9b59b6 !default;
$modal-warning-background-color: #e67e22 !default;
$modal-success-background-color: #2ecc71 !default;
$modal-info-background-color: #34495e !default;

//Modal content
$modal-content-padding: px-to-rems(15) px-to-rems(40) px-to-rems(30) !default;
$modal-content-font-weight: 300 !default;
$modal-content-font-size: px-to-rems(18) !default;
$modal-content-ul-padding: 0 0 px-to-rems(30) px-to-rems(20) !default;
$modal-content-list-item-padding: px-to-rems(5) 0 !default;

//Overlay
$modal-overlay-z-index: $modal-z-index - 10 !default;
$modal-overlay-background: #000 !default;
$modal-overlay-background-opacity: 0.8 !default;
$modal-overlay-show-opacity: 1 !default;

//Header
$modal-header-padding: px-to-rems(6) !default;
$modal-header-text-align: center !default;
$modal-header-font-size: px-to-rems(38) !default;
$modal-header-font-weight: $modal-content-font-weight !default;
$modal-header-background-color: #000 !default;
$modal-header-opacity: 0.8 !default;

//Modal variations
$modal-radius: px-to-rems(3) !default;

//Modal footer
$modal-footer-padding: px-to-rems(10) 0 !default;

//Modal extra themes
$include-modal-extra-themes: false !default;
$include-fade-in-scale-up-effect: true !default;
$include-slide-from-right-effect: true !default;
$include-slide-from-bottom-effect: true !default;
$include-fall-effect: true !default;
$include-slide-stick-effect: true !default;
$include-super-scaled-effect: true !default;
  </code>
</pre>

<blockquote class="primary">
  <h4>Further info</h4>
  <p>We provide some mixins for you to play around, also we recommend you to visit the <a href="https://github.com/IcaliaLabs/furatto/blob/master/scss/furatto/_modal.scss">sass source file</a>.</p>
</blockquote>
